MODULE 1.6
User-centered-design
In deze module gaan we aan de slag met adobe XD en illustrator, hierbij hoort natuurlijk ook een passende opdracht. Van deze opdracht heb ik een briefing gemaakt zodat de vele informatie duidelijk te begrijpen is. Hieronder is de briefing te lezen:
BRIEFING
De opdracht waaraan we gaan werken in deze module gaat over het ontwerpen van een educatatieve game of app. Het is de bedoeling dat in dit ontwerp kinderen tussen de 6 en 10 jaar oud aangesproken worden. Het gaat erom dat er een vernieuwing in het onderwijs komt en er een boeiende en interactieve leerervaring ontstaat. Dit is dan de boodschap die wij zullen gaan verwerken in onze ontworpen interface.
Om dit doel te bereiken zullen we stapsgewijs aan de slag gaan. Hiermee beginnen we met deze briefing om de opdracht duidelijk in beeld te krijgen. Vanaf dit punt gaan we aan de slag met een onderzoek, hierin willen duidelijkheid krijgen over de doelgroep en de eisen waaraan dit project moet voldoen.
In de onderzoeksfase gaan we ook testen uitvoeren. Dit doen we door middel van het onderzoeken naar soortgelijke producten en deze uit testen en hiervoor onszelf ideeën op doen. Dit onderzoek gaan we analyseren en dan kunnen wij een duidelijk stappenplan gaan maken van hoe onze interface opgebouwd moet worden. Nu kunnen we dus een prototype gaan maken en deze testen laten.
Zodra de prototypes afzijn kunnen we aan de slag met het eindwerk hierin zullen wij gebruik maken van programma’s zoals illustrator en adobe XD.
Na deze opdracht beschikken we over kennis over interface en userflow en hebben we ook de basiskennis over het gebruik maken van adobe XD en illustrator
ONDERZOEK
Nu de briefing af is ga ik beginnen met duidelijkheid te krijgen over wat voor educatieve spellen voornamelijk gespeeld worden door de leeftijdsgroep van 6 tot 10 jaar.
Uit veel onderzoeken en uit ervaringen van docenten komt terug dat het enorm helpt om kinderen spelend iets te leren, hierdoor zijn ze meer gemotiveerd maar is de interesse ook hoger. Op de juiste manier vorm geven zorgt er dus voor dat kinderen de aandacht behouden, dit is erg belangrijk ook voor mij hoe ik dat het beste kan verwerken in mijn app. Je ziet vaak veel positieve kleuren terugkomen en makkelijk begrijpbare icoontjes.
DUOLINGO
Duolingo is een toegankelijke app om talen te leren, dit kan op een makkelijk niveau maar ook op gevorderden niveau's. Duolingo maakt veel gebruik van icoontjes die de vragen verduidelijken maar ook het spelen leuker maken door de bewegingen die ze maken, zo zijn de poppetjes blij als je het antwoord goed hebt. Ook wordt er gebruik gemaakt van afwisselende opdrachten, het is niet een soort vraagstelling constant. Deze variatie helpt ook enorm met de concentratie te behouden en geïnteresseerd te blijven.
SQULA
Squla wordt veel gebruikt op basisscholen en past precies bij de leeftijdscategorie die wij aan het onderzoeken zijn. Squla werkt ook met een wisselende vraagstelling, van zelf antwoorden invullen tot kiezen op speelse wijzen, verder werken ze ook met kleurrijke icoontjes en plaatjes.
SPELLETJES.NL
Dit is een grotere website met nog meer variatie en net wat minder diepgang in de spellen. Hier ligt de focus wat kleiner maar toch zijn ze nog altijd op de zelfde manier vorm gegeven als de spellen hierboven, leuke kleuren en een kleine animatie als je wat goed hebt. Hier is het wel zo heb je het fout, dan is het einde spel maar je kan wel je records verbreken. Bij het voorbeeld van hieronder zat ook een timer aan je antwoordtijd vast.
WIREFRAME
Nu ik een aantal van dit soort apps zelf heb uitgeprobeerd heb ik voor mijn eigen app een aantal ideeën op kunnen doen. Vanuit hier ben ik een schets gaan maken van de wireframe. Deze schets is hieronder te zien. Deze schets is digitaal uit getekend en erg grof en simpel gehouden dat er nog de mogelijkheid tot verandering is als het niet lukt om uit te voeren.
In de schets is ook al de userflow door middel van de pijlen te zien.
Een aantal icoontjes zal ik in illustrator uitwerken, een punt waarop ik later terugkom.
In de app kan je tussen een aantal vakken kiezen, in het voorbeeld kies je voor rekenen en gaat vanuit daar een aantal sommen doen om de opdracht af te ronden. De opdracht is om de fietser naar het eindpunt te laten gaan door middel van goede antwoorden.
ADOBE XD
Nu ik de low fidelity sketch af heb kan ik deze gaan omzetten in adobe xd, mijn plan hiervoor is om eerst alles in zwart wit om te zetten en daarna de kleuren op de juiste manier gaan toepassen. Bepaalde icoontjes zal ik in illlustrator maken, hierop kom ik later nog terug. Voor nu is hieronder mijn proces te zien met het werken in Adobe XD om de basis van de wireframe neer te zetten. Hieronder is te zien hoe ik mijn schets overgezet heb naar adobe XD als eerste, nu alles staat kan ik de juiste kleuren gaan zoeken en ook een leuk lettertype.
Hieronder een aantal kleurenpalette te zien die ik passend vond voor de app, uiteindelijk heb ik hier voor de middelste gekozen. Hier zijn het nog altijd vrolijke kleuren maar ook zacht genoeg om niet te veel af te leiden.
Hieronder is te zien hoe ik de kleuren aan het passen ben, in de opdracht is vermeld dat we maar drie pagina's volledig hoeven uit te werken maar ik heb ervoor gekozen om het een geheel te maken en ze allemaal uit te werken.
ILLUSTRATOR
De volgende stap is dus om alle icoontjes die niet zo mooi uit zien als ze gemaakt worden in adobe XD, te gaan maken in Illustrator. Dat zijn de volgende knoppen: home, next, icoontje profiel, racelijn en fiets, tekstwolkjes en de mascotte.
Hieronder zijn als eerste mijn schetsen te zien van deze knoppen.
Hieronder is het proces te zien van hoe ik aan het werk gegaan ben in illustrator, en hoe ik dit erna in adobe XD heb gezet. Ik vond in illustrator werken wat lastig, dit kwam omdat ik een inschattings fout heb gemaakt met hoeveel ik tijd voor deze opdracht nodig had waardoor ik niet al mijn rust heb kunnen nemen om illustrator goed te leren begrijpen. Des ondanks ben ik illustrator in gegaan met het idee dat ik gewoon ga experimenteren en uitproberen, dit heb ik dan ook gedaan en hiervan heb ik veel geleerd. Ik wil deze kennis dan ook graag verder gaan toepassen en uitbreiden en nog meer in illustrator te werken.
EINDRESULTAAT
Hieronder is dan het uiteindelijke eindresultaat te zien van de app die ik gemaakt heb in Adobe XD met behulp van illustrator.
REFLECTIE
Over het algemeen heb ik deze module heel interessant gevonden en vond ik het heel leuk om wat nieuws te leren, zoals adobe XD en illustrator. Dit waren beide programma's waar ik nog nooit eerder in gewerkt heb maar nu ik er wat ervaring mee heb opgedaan heeft bij mij dit wel een nieuwsgierigheid opgewekt met wat ik hier in de toekomst nog verder mee kan doen.
Ik heb mijn tijdsverdeling van de opdracht wat verkeerd in geschat wat ik uiteindelijk erg jammer vond, hierdoor heb ik niet de tijd en prestatie in de opdracht kunnen stoppen zoals ik dat normaal zou doen, een volgende keer zou ik hier dus nog wat in willen verbeteren waardoor ik hopelijk nog meer kennis kan opdoen.
Bedankt voor het bekijken!
